ember-cli-htmlbars

What is ember-cli-htmlbars?

The ember-cli-htmlbars package is an Ember CLI addon that provides a precompiler for Handlebars templates. It allows you to write Handlebars templates in your Ember.js applications and have them compiled into JavaScript functions that can be rendered efficiently.

What are ember-cli-htmlbars's main functionalities?

Precompiling Handlebars Templates

This feature allows you to precompile Handlebars templates into JavaScript functions. The `hbs` tagged template literal is used to define a Handlebars template, which is then compiled by ember-cli-htmlbars.

import { hbs } from 'ember-cli-htmlbars';

export default hbs`<div>{{yield}}</div>`;

Integration with Ember CLI

The package integrates seamlessly with Ember CLI, allowing you to easily add it to your Ember.js project using the Ember CLI command line tool.

ember install ember-cli-htmlbars

Template Compilation

This feature provides a function to compile Handlebars templates into JavaScript functions programmatically. The `compileTemplate` function takes a Handlebars template string and returns a compiled template function.

import { compileTemplate } from 'ember-cli-htmlbars';

const template = compileTemplate('<div>{{yield}}</div>');

Other packages similar to ember-cli-htmlbars

handlebars

The handlebars package is the core Handlebars library that provides the functionality to compile and render Handlebars templates. While it is not specific to Ember.js, it can be used in any JavaScript project to work with Handlebars templates.

ember-handlebars

The ember-handlebars package is an older package that was used in earlier versions of Ember.js to provide Handlebars template compilation. It has largely been replaced by ember-cli-htmlbars in modern Ember.js applications.

README

Ember CLI HTMLBars

Handlebars 2.0 Support

Handlebars 2.0 support has been removed. If you are using ember-cli-htmlbars with a 1.9.x project please continue to use ember-cli-htmlbars@0.6.x.

Using as a Broccoli Plugin

var HtmlbarsCompiler = require('ember-cli-htmlbars');

var templateTree = new HtmlbarsCompiler('app/templates', {
  isHTMLBars: true,

  // provide the templateCompiler that is paired with your Ember version
  templateCompiler: require('./bower_components/ember/ember-template-compiler')
});

Registering a Plugin

var SomeTransform = require('./some-path/transform');

module.exports = {
  name: 'my-addon-name',

  included: function() {
    // we have to wrap these in an object so the ember-cli
    // registry doesn't try to call `new` on them (new is actually
    // called within htmlbars when compiling a given template).
    this.app.registry.add('htmlbars-ast-plugin', {
      name: 'some-transform',
      plugin: SomeTransform
    });
  }
};

Precompile HTMLBars template strings within other addons

module.exports = {
  name: 'my-addon-name',

  setupPreprocessorRegistry: function(type, registry) {
    var htmlbarsPlugin = registry.load('template').find(function(plugin) {
      return plugin.name === 'ember-cli-htmlbars';
    });

    // precompile any htmlbars template string via the precompile method on the
    // ember-cli-htmlbars plugin wrapper; `precompiled` will be a string of the
    // form:
    //
    //   Ember.HTMLBars.template(function() {...})
    //
    var precompiled = htmlbarsPlugin.precompile("{{my-component}}");
  }
};